import 'package:flutter/material.dart';
import 'package:rabbit_mobile/view/goods_details/models/goods_details_model.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';

class GoodsDetailsProperties extends StatefulWidget {
  final GoodsDetailsDetailsModel details;
  const GoodsDetailsProperties({super.key, required this.details});

  @override
  State<GoodsDetailsProperties> createState() => _GoodsDetailsPropertiesState();
}

class _GoodsDetailsPropertiesState extends State<GoodsDetailsProperties> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
          width: double.infinity,
          decoration: const BoxDecoration(
            color: Colors.white
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: double.infinity,
                padding: const EdgeInsets.only(left: 12),
                decoration: const BoxDecoration(border: Border(left: BorderSide(width: 4, color: Color(0xFF00CE8A)))),
                child: const Text("商品詳情", style: TextStyle(fontSize: 16, color: Colors.black)),
              ),
              Container(
                margin: const EdgeInsets.symmetric(vertical: 8),
                height: .6,
                decoration: const BoxDecoration(color: Color.fromARGB(62, 158, 158, 158)),
              ),
              Column(
                children: List.generate(widget.details.properties.length, (int index) {
                  final item = widget.details.properties[index];
                  return Container(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    width: double.infinity,
                    constraints: const BoxConstraints(
                      minHeight: 40
                    ),
                    decoration: const BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          width: .6,
                          color: Color.fromARGB(62, 158, 158, 158)
                        )
                      )
                    ),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Text(
                            item.name,
                            style: const TextStyle(fontSize: 14, color: Colors.grey),
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Text(
                            item.value,
                            style: const TextStyle(fontSize: 14, color: Colors.black),
                          ),
                        )
                      ],
                    ),
                  );
                }),
              ),
              // ListView.separated(
              //   shrinkWrap: true,
              //   physics: const NeverScrollableScrollPhysics(),
              //   itemCount: widget.details.properties.length,
              //   itemBuilder: (BuildContext content, int index) {
              //     final item = widget.details.properties[index];
              //     return Container(
              //       width: double.infinity,
              //       height: 40,
              //       decoration: BoxDecoration(
              //         color: Colors.teal
              //       ),
              //       child: Row(
              //         children: [
              //           Expanded(
              //             flex: 1,
              //             child: Text(
              //               item.name,
              //               style: const TextStyle(fontSize: 14, color: Colors.grey),
              //             ),
              //           ),
              //           Expanded(
              //             flex: 2,
              //             child: Text(
              //               item.value,
              //               style: const TextStyle(fontSize: 14, color: Colors.black),
              //             ),
              //           )
              //         ],
              //       ),
              //     );
              //   },
              //   separatorBuilder: (BuildContext content, int index) {
              //     return Container(
              //       margin: const EdgeInsets.symmetric(vertical: 8),
              //       height: .6,
              //       decoration: const BoxDecoration(color: Color.fromARGB(62, 158, 158, 158)),
              //     );
              //   },
              // )
            ],
          ),
        ),
        Column(
          children: List.generate(widget.details.pictures.length, (index) {
            return CustomCacheImageWidget(imageUrl: widget.details.pictures[index], circle: 0,);
          }),
        )
      ],
    );
  }
}
